<template>
  <div class="blog-m-article" v-if="article.id">
    <div class="blog-m-article--title">
      <h1>{{ article.title }}</h1>
    </div>
    <MArticleInfo :info="info" />
    <MArticleContentVue :article="article" />
    <MConmont :conments="article.conments" />
    <van-action-sheet
      class="blog-sheet"
      v-model="showSheet"
      title="评论"
      close-on-click-action
    >
      <div class="blog-sheet--content">
        <van-field
          v-model="content"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        />
      </div>
      <van-button type="info" block @click="subCom">提交</van-button>
    </van-action-sheet>
  </div>
</template>

<script>
import MArticleContentVue from "@/components/m/MArticleContent";
import MArticleInfo from "@/components/m/MArticleInfo";
import MConmont from "@/components/m/MConmont";
import { Notify } from "vant";
export default {
  name: "VueEleMArticle",
  components: {
    MArticleContentVue,
    MArticleInfo,
    MConmont
  },
  props: {
    id: {
      type: String,
    },
  },
  data() {
    return {
      article: {},
      showSheet: false,
      content: "",
    };
  },
  computed: {
    nickName() {
      return this.article.author?.nickName ?? "默认名称";
    },
    info() {
      return {
        nickName: this.nickName,
        likes: this.article.likes,
        hits: this.article.hits,
        conment_num: this.article.conment_num,
        date: this.article.date,
        id: this.article.id,
        avatar: this.article?.author?.avatar,
      };
    },
  },
  created() {
    this.getArticleById();
    this.$bus.$on("showActionSheet", this.showActionSheet);
  },
  beforeDestroy() {
    this.$bus.$off("showActionSheet", this.showActionSheet);
  },
  methods: {
    async getArticleById() {
      try {
        let result = await this.$http({
          type: "article",
          data: { id: this.id },
        });
        this.article = result.data;
      } catch (err) {
        console.log(err);
        this.$notify.error({
          title: "文章获取失败",
          message: err.message,
        });
        this.$router.push("/index");
      }
    },
    showActionSheet() {
      // 如果用户没哟登录, 不会出现弹窗, 告诉用户请先登录, 然后弹出dilog弹出框, 请求用户线登录
      if (!this.$store.state.user.token || !this.$store.state.user.userInfo._id) {
        Notify({ type: "warning", message: "请先登录" });
        this.$bus.$emit('showUserLogin', 'login')
        return false;
      }
      this.showSheet = true;
    },
    async subCom() {
      // 如果没有内容, 发出提示, 有内容, 向http发起提交请求
      if (!this.content?.trim()) {
        Notify({ type: "warning", message: "请输入评论内容" });
        return false;
      }
      try {
        this.$http({
          type: "postConments",
          data: { aid: this.id, content: this.content },
        });
        Notify({ type: "success", message: "评论成功" });
        // 评论成功, 刷新文章, 重新获取评论内容
        this.getArticleById();
      } catch (err) {
        console.log(err);
        Notify({ type: "danger", message: "评论失败" });
      }
      this.showSheet = false;
    },
  
  },
};
</script>

<style lang="stylus" 
>
/*
article, 点击屏幕左上角提交评论, head一直监听route变化, 如果route改变, 根据meta, 展现不同的样式, 出现button, 如果button存在, 就设置点击实现handle, 触发对应路由的点击事件

*/
.blog-m-article {
  padding: 0 0.22em;
  background-color: #f1f1f1;
}
.blog-m-article--title
  padding-bottom 0
  background-color #fff
.blog-m-article--title h1 {
  padding: 0.67em 0.3em;
  border-bottom: 1px solid var(--borderColor-muted);
  font-size: 0.8em;
  font-weight: var(--base-text-weight-semibold, 600);
  line-height: 1.25;
 
}

.blog-sheet.van-action-sheet {
  padding: 0 16px 24px;
  box-sizing: border-box;
}

.blog-sheet--content {
  max-height: 97px;
  padding: 16px 16px 80px;
}
</style>